<template>
  <div :class="[statusBg, 'rounded-full']" :style="{ width: width + 'px', height: height + 'px' }"></div>
</template>

<script lang="ts" setup>
import { FriendStatus } from "@/types/friend.ts";
import { computed } from "vue";

const props = withDefaults(
  defineProps<{
    status: FriendStatus;
    width?: number;
    height?: number;
  }>(),
  {
    status: FriendStatus.off,
    width: 12,
    height: 12,
  },
);

const statusBg = computed(() => {
  if (props.status === FriendStatus.online) return "bg-green-400";
  return "bg-gray-400";
});
</script>

<style lang="scss" scoped></style>
